<template>
  <div class="about">
    <h1>msg: {{state.msg}}</h1>
    <h1>user.name: {{state.user.name}}</h1>
    <h1>user.age: {{state.user.age}}</h1>
    <h1>numbers[1]: {{state.numbers[1]}}</h1>

    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">

interface State {
  msg: string
  user: {
    name?: string
    age?: number
  }
  numbers: number[]
}

import {
  reactive
} from 'vue'
export default {

  setup () {

    // 产生一个reactive响应对象
    // 目标对象的代理对象
    const state = reactive<State>({
     msg: 'abcd',
     user: {
       name: 'tom'
     },
     numbers: [1, 3, 5]
   })
   console.log(state)
   
   const update = () => {
     // 更新基本类型属性
    //  state.msg += '--'
    // 更新对象属性内部数据
    // state.user.name += '--'

    // 直接给对象添加一个新属性   ==> vue2不可以
    // state.user.age = state.user.age ? state.user.age+1 : 1
    // 直接删除对象的已有属性  ==> vue2不可以
    // delete state.user.name

    // 直接通过下标替换数组元素
    state.numbers[1] = 7  // vue2不可以
   }

    return {
      state,
      update
    }
  }
}
</script>